<template>
  <view
    class="activity-ranking"
    :style="`background-image: url(${ranking_bg});`"
  >
    <CustomHeader :class="{ headWhite: headWhite }" />
    <scroll-view
      class="activity-ranking-scroll"
      :style="`height: calc(100vh - ${MBHeight + MBTop}px - 20rpx);`"
      :scroll-y="true"
      @scroll="scrollList"
    >
      <view class="activity-ranking-scroll_wrap">
        <view>
          <MainTabs
            :main-type="mainType"
            main="全国"
            sub="城市"
            @change="handleMainType"
          />
        </view>
        <SemicircleButton
          v-if="is_habit_activity"
          text="总榜"
          :handle-tap="goTotalRanking"
        />
        <view v-if="name" class="personal-ranking-wrap">
          <border-box
            :inside-padding="16"
            bd-color="#CB9064"
            bg-color="#FFFBEA"
          >
            <view class="personal-ranking">
              <view class="side">
                <view class="num">
                  {{ ranking }}
                </view>
                <view class="text"> 排名 </view>
              </view>
              <view class="center">
                <image :lazy-load="true" :src="avatar" />
              </view>
              <view class="side">
                <view class="num">
                  {{ petal_num }}
                </view>
                <view class="text">
                  {{ showName }}
                </view>
              </view>
            </view>
            <view class="user-name">
              {{ name }}
            </view>
          </border-box>
        </view>
        <view>
          <view class="ranking-operation-wrap">
            <view
              class="left"
              :style="{ 'background-image': `url(${theme_sort})` }"
              @tap="handleSort"
            >
              {{ queryText }}
            </view>
            <view class="right">
              <view class="main" @tap="handleRule">
                <AtIcon
                  class="icon"
                  value="alert-circle"
                  size="12"
                  color="#A13D0F"
                />排行榜规则
              </view>
              <view class="tips"> 数据统计至昨日 </view>
            </view>
          </view>
        </view>
        <view class="list-wrap">
          <view v-for="(n, i) in rank_list" :key="i" class="list-item">
            <view class="left">
              <image
                v-if="i < 3"
                :lazy-load="true"
                class="ranking-img"
                :src="rankImgList[i]"
              />
              <view v-else class="ranking">
                {{ n.ranking }}
              </view>
              <image :lazy-load="true" class="avatar" :src="n.avatar" />
              <view class="name">
                {{ n.name }}
              </view>
            </view>
            <view class="right">
              <image
                v-if="rank_type === 1"
                :lazy-load="true"
                class="petal"
                :src="petal_img"
              />
              <view class="num">
                {{ n.ranking_rules }}
              </view>
            </view>
          </view>
          <ranking-empty
            v-if="!rank_list.length"
            text="暂无数据，明天再来看看吧～"
          />
        </view>
      </view>
    </scroll-view>
    <finish-button
      v-if="!is_attend_activity"
      class="want-add"
      :width="690"
      @click="handleAdd"
    >
      我要参与
    </finish-button>
    <action-sheet
      class="ranking-modal"
      :is-opened-modal.sync="isOpenedModal"
      :height="888"
      :catchtouchmove="true"
    >
      <view
        class="modal-title"
        :style="{ 'background-image': `url(${activity_title_bg})` }"
      >
        排行榜说明
      </view>
      <view class="rule-modal">
        <view v-for="n in ruleList" :key="n.id">
          {{ `${n.id}.${n.content}` }}
        </view>
      </view>
    </action-sheet>
    <AtActionSheet
      cancel-text="取消"
      :is-opened="isOpenedSort"
      :on-close="handleSortClose"
    >
      <AtActionSheetItem
        v-for="n in queryOpt"
        :key="n.v"
        :on-click="() => clickActionSheetItem(n)"
      >
        {{ n.t }}
      </AtActionSheetItem>
    </AtActionSheet>
  </view>
</template>

<script>
import "./index.scss";
import Taro from "@tarojs/taro";
import borderBox from "_c/border-box/index";
import SpecialBox from "_c/special-box/index.vue";
import MainTabs from "_c/main-tabs/index.vue";
// import MainTabs from "_c/main-tabs/index.vue";
import CustomHeader from "_c/custom-header/index.vue";
import SemicircleButton from "_c/semicircle-button/index.vue";
import { DEFAULT_IMG } from "@/config/clock-calendar";
import { getCurrentInstance } from "@tarojs/taro";
import contactTeacher from "_c/contact-teacher/index";
import rankingEmpty from "_c/ranking-empty/index";
import {
  ranking_bg,
  activity_title_bg,
  theme_sort,
  petal_img,
  champion,
  runner_up,
  second_runner_up,
  activity_offline,
} from "@/libs/image-url";
import { AtIcon, AtActionSheet, AtActionSheetItem } from "taro-ui-vue";
import actionSheet from "@/components/action-sheet/index";
import globalData from "@/libs/globalData";
import finishButton from "@/components/finish-button/index";
import {
  personalActivityRank,
  personalGeneralListRank,
  personalExplain,
} from "_api/ranking";
import { joinActivity } from "_api/activity";
import { handleJudgeIsLogin } from "@/libs/util";

const API_ARR = [personalActivityRank, personalGeneralListRank];
const queryOpt = [
  {
    v: 1,
    t: "花瓣排名",
    showName: "花瓣",
  },
  {
    v: 2,
    t: "累计打卡次数排名",
    showName: "次",
  },
  {
    v: 3,
    t: "连续打卡天数排名",
    showName: "天",
  },
];
export default {
  name: "ActivityRanking",
  components: {
    CustomHeader,
    MainTabs,
    SemicircleButton,
    borderBox,
    AtIcon,
    AtActionSheet,
    AtActionSheetItem,
    actionSheet,
    finishButton,
    rankingEmpty,
  },
  data() {
    return {
      ranking_bg,
      activity_title_bg,
      theme_sort,
      petal_img,
      rankImgList: [champion, runner_up, second_runner_up],
      DEFAULT_IMG,
      queryOpt,
      MBHeight: 0,
      MBTop: 0,
      isGeneral: 0,
      activity_id: 0,
      clockLog: [],
      headWhite: false,
      mainType: 0,
      rank_type: 1,
      isOpenedModal: false,
      isOpenedSort: false,
      avatar: "",
      is_attend_activity: 0,
      name: "",
      ranking: 0,
      petal_num: 0,
      is_habit_activity: 0,
      rank_list: [],
      ruleList: [],
      /* 根据不同类型展示不同文案 */
      showName: "花瓣",
    };
  },
  computed: {
    queryText() {
      return queryOpt[this.rank_type - 1].t;
    },
  },
  created() {
    this.MBHeight = globalData.getData("MBHeight");
    this.MBTop = globalData.getData("MBTop");
  },
  onLoad(opt) {
    this.isGeneral = ~~opt.isGeneral;
    this.activity_id = opt.id;
    this.getInfo();
  },
  methods: {
    getInfo() {
      let obj = {
        activity_id: this.isGeneral ? undefined : this.activity_id,
        city_type: this.mainType,
        rank_type: this.rank_type,
      };
      API_ARR[this.isGeneral](obj).then((r) => {
        this.rank_list = [];
        Object.assign(this.$data, r.data);
      });
    },
    handleMainType(type) {
      if (this.mainType === type) {
        return;
      }
      this.mainType = type;
      this.getInfo();
    },
    goTotalRanking() {
      console.log(this.activity_id);
      Taro.navigateTo({
        url: `/pages/activity-ranking/index?isGeneral=1&id=${this.activity_id}`,
        canRepeat: true,
      });
    },
    handleSort() {
      this.isOpenedSort = true;
    },
    handleSortClose() {
      this.isOpenedSort = false;
    },
    handleRule() {
      if (!this.ruleList.length) {
        personalExplain().then((r) => {
          this.ruleList = r.data;
          this.isOpenedModal = true;
        });
      } else {
        this.isOpenedModal = true;
      }
    },
    handleClose() {
      this.isOpenedModal = false;
    },
    scrollList({ detail: { scrollTop } }) {
      this.headWhite = scrollTop > 20;
    },
    handleAdd() {
      const hasAuth = handleJudgeIsLogin();
      if (!hasAuth) return;
      joinActivity({ id: this.activity_id })
        .then((r) => {
          Taro.showToast({
            title: "加入成功",
            icon: "none",
            duration: 2000,
          });
          Taro.redirectTo({
            url: `/pages/activity-detail/index?id=${this.activity_id}`,
          });
        })
        .catch((err) => {
          Taro.showToast({
            title: err.message,
            icon: "none",
            duration: 2000,
          });
        });
    },
    clickActionSheetItem(n) {
      if (this.rank_type === n.v) {
        this.handleSortClose();
        return;
      }
      this.rank_type = n.v;
      this.showName = n.showName;
      this.getInfo();
      this.handleSortClose();
    },
  },
};
</script>
